<template>
    <div class="show-order"  >
        <div class="header">
            <router-link class="header-btnLeft" :to="{path:'/GroupShow',query:{line_id:groupInfo.line_id,product_id:groupInfo.product_id}}" ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">{{carPoolOrder ? '参与拼游' : '发起拼游'}}</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="product">
            <img class="product-img" :src="groupInfo.img">
            <div class="product-info">
                <div class="product-info-title">{{groupInfo.title}}</div>
                <div class="product-info-title2">已售：{{groupInfo.total_sold}}</div>
                <div class="product-info-desc">ID：{{line_id}}</div>
               <!-- <div class="product-info-desc">数量：
                    <span v-for="item in product.person" wx:key="unique" v-if="item.person_num">
                        {{item.person_name}}×{{item.person_num}}
                    </span>
                </div>-->
            </div>
        </div>
        
        <!--出团信息以及设计到的id-->
       <!-- <div class="grouptourism">
           <div>拼游订单ID:<span>{{carPoolOrder}}</span></div>
        </div>-->
        <div class="h30"></div>
        <div class="list">
            <form bindsubmit="formSubmit">
                <div class="list-title">
                    联系人信息
                    <div v-if="carPoolOrder" class="list-title-tips">
                        「{{carPoolOrderData.title}}」
                    </div>
                </div>
                <div  class="list-item">
                    <div class="list-item-title">手机号 <span class="warning">*</span></div>
                    <div  class="list-item-input flex-box-center">
                        <TelCode :phoneCode="phoneCode" v-on:phoneCodeFn="phoneCodeFnFn" ></TelCode>
                        <input  name="phone" class='list-item-input-phone listinputwidth'   v-model.trim="phone" placeholder="出行人手机号"  maxlength="30"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">姓名 <!--<span class="warning">*</span>--></div>
                    <div class="list-item-input"><input class="listinputwidth" name="name1"   v-model="name1" placeholder="请输入您的姓名"/></div>
                </div>
                <!--<div class="list-item">
                    <div class="list-item-title">名（拼音）<span class="warning">*</span></div>
                    <div class="list-item-input"><input name="name2" @input="association($event.target.value,'ming')"   v-model="name2"  placeholder="请输入您的名"/></div>
                </div>-->
                <div class="list-item">
                    <div class="list-item-title">微信号</div>
                    <div class="list-item-input"><input class="listinputwidth" name="wechat"  v-model="wechat"  placeholder="方便与您确认行程"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">邮箱
                        <!--<span class="warning">*</span>-->
                    </div>
                    <div class="list-item-input"><input class="listinputwidth" name="email"   v-model.trim="email" placeholder="方便接收行程确认信息"/></div>
                </div>
                <div class="list-item" v-if="bookingQuestions.length>0" v-for="(item,index) in bookingQuestions" :key="item.stringQuestionId">
                    <div class="list-item-title">{{item.title}}
                        <span class="warning">*</span>
                    </div>
                    <div class="list-item-input"><input class="listinputwidth" style="width:100%" :name="item.stringQuestionId"  v-model="bookingQuestions[index].answer" :placeholder="item.subTitle"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">成人</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" min="1" name="adultPassengers"   v-model.number="adultPassengers" placeholder="请输入成人数" @blur="totalPriceFun"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">儿童</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="childPassengers"   v-model.number="childPassengers" placeholder="请输入儿童数（12岁以下）" @blur="showChildAges"/></div>
                </div>
                <div class="list-item" v-for="(item,index) in childAges">
                    <div class="list-item-title">{{childAges.length > 1 ? '第'+(index+1)+'位儿童年龄' : '儿童年龄'}}</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="childAges"   v-model.number="childAges[index]" placeholder="请输入儿童年龄" /></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">大行李数量</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="largeLuggages"   v-model.number="largeLuggages" placeholder="20寸及以上行李箱为大行李"/></div>
                </div>
                <!-- <div class="list-item">
                    <div class="list-item-title">行李信息</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="largeLuggages"   v-model="largeLuggages" placeholder="20寸及以上行李箱为大行李"/></div>
                </div> -->
                <div class="list-item" v-if="!carPoolOrder">
                    <div class="list-item-title">出行日期<span class="warning">*</span></div>
                    <div class="list-item-input"><input class="listinputwidth" ref="listinput1"  name="largeLuggages" @click="selectData" v-model="startDate" placeholder="请选择出行日期"/></div>
                </div>
                <div class="list-item" v-else>
                    <div class="list-item-title" >出行日期</div>
                    <div class="list-item-input">
                        <span>{{startDate}}</span>
                    </div>
                </div>
                <div class="list-item" v-if="groupInfo.hotel_unit_price > 0 || groupInfo.hotel_days > 0">
                    <div class="list-item-title">酒店房间数</div>
                    <div class="list-item-input list-item-flex">
                        <input class="listinputwidth" @blur="showChildAges" type="number" name="hotel_num" v-model="hotel_num" placeholder="酒店房间数"/>
                        <div>
                            <span class="strong">￥{{unit_hotel_price_cny}}</span>
                            <!-- <span>（{{groupInfo.person_price_currency}}{{groupInfo.hotel_unit_price_cny}}）</span> -->
                            <span>({{groupInfo.person_price_currency}}{{unit_hotel_price}})</span>
                            <span>/间/{{groupInfo.hotel_days}}晚</span>
                        </div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">接送地址</div>
                    <div class="list-item-input">
                        <textarea class="listinputwidth list-item-textarea" name="serve_address" v-model="serve_address" placeholder="请输入您的酒店接送地址（英文），便于为您提供接送服务。"></textarea>
                    </div>
                </div>
                <!--content-->
                <div class="list-item">
                    <div class="list-item-title">备注</div>
                    <div class="list-item-input">
                        <textarea class="listinputwidth list-item-textarea" name="content" v-model="content" placeholder="请输入备注信息，便于为您提前准备所需服务，例如：需要为您准备儿童座椅等信息"></textarea>
                    </div>
                </div>
                <div class="pickerDemo">
                    <!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->
                    <div class="pickerPop" @touchmove.prevent>
                        <!-- 年月日时分选择 -->
                        <mt-datetime-picker
                                lockScroll="true"
                                ref="datePicker"
                                v-model="dateVal"
                                class="myPicker"
                                type="date"
                                year-format="{value}"
                                month-format="{value}"
                                date-format="{value}"
                                @confirm="dateConfirm()">
                        </mt-datetime-picker>
                    </div>
                </div>

            </form>
        </div>
        <div class="pay-tips">
            小V拼游霸气提示：
            <div>支付款后还有机会享受返现哦。 拼游伙伴越多，返现越多。具体见产品详情页。</div>
        </div>

        <div class="list-prices prices-item">
        <!-- <div class="list-prices-list">
            <div class="list-prices-title">总价（人民币）</div>
            <div class="list-prices-cny">￥ {{totalPricePayCNY}}</div>
        </div> -->
        <div class="list-prices-list">
            <!-- <div class="list-prices-title">总价（{{groupInfo.currency_name}}）</div> -->
            <div class="list-prices-title">总价</div>
            <div class="list-prices-local">￥{{totalPricePayCNY}}<span>（{{groupInfo.person_price_currency}}{{totalPricePay}}）</span></div>
        </div>
        </div>
        <div class="order-buy">
            <div @click='buyPost' class="order-buy-btn">{{carPoolOrder ? '立即拼游' : '发起拼游'}}</div>
        </div>

        <div class="h30"></div>

        <div class="h120"></div>


        <!-- <div class="buyBar">
            <div class="buyBar-item">
                <div class="buyBar-item-title">总价</div>
                <div class="buyBar-item-price">¥ {{totalprices}}</div>
            </div>
            <div class="buyBar-buy" @click='buyPost'>报名</div>
        </div> -->

    </div>
</template>

<script type="text/ecmascript-6">
    import { Toast,MessageBox, Indicator,Actionsheet,DatetimePicker} from 'mint-ui';
    import {formatDate} from '@/assets/js/formatdate.js'  //格式化日期时间
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import TelCode from '../components/TelCode';
    import storage from "../store/localstorage";

    //add by sunyifei for debug
    // import Vue from 'vue';
    // import VueToasted from 'vue-toasted';
    //
    // Vue.use(VueToasted, {
    //   theme: "toasted-primary",
    //   position: 'top-left'
    // });


    export default {
        name: "Show-order",
        components:{
            TelCode,
        },
        data() {
        return {
            person:[],
            url:config.url,
            name1: '',
            name2: '',
            wechat: '',
            phone:'',
            phoneCode:'电话区号',
            email:'',
            content: '',
            adultPassengers:1,
            childPassengers: 0,
            childAges: [],
            largeLuggages: 0,
            serve_address:'',
            hotel_num: '',
            totalPrice: 0, //总价
            totalPriceCNY: 0,
            totalPricePay: 0, //实际支付总价
            totalPricePayCNY: 0,
            unit_hotel_price: 0,
            unit_hotel_price_cny: 0,
            product: '',
            bookingQuestions:[],//预定需回答的问题
            dateVal: '', // 默认是当前日期
            startDate: '',
            line_id:'',
            product_id:'',
            carPoolOrder:'',
            carPoolOrderData: '',
            groupInfo: '',  //拼游列表info信息
            shareImg:'', //分享用的图
            personid:'', // 选择几人成团ID
            totalprices:0 , //价格   人数*单价
            groupOrder:[],//团信息
            person_id:'', //拼游id
            isBusySeason: ''
        }
    },
    methods: {
        /*表单日期与时间*/
        selectData () { // 打开时间选择器
            // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
            if (this.startDate) {
                this.dateVal = this.startDate
            } else {
                this.dateVal = new Date()
            }
            this.$refs['datePicker'].open()
            this.$refs.listinput1.blur()
        },
        dateConfirm () { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
            this.startDate = formatDate(this.dateVal)
            this.isBusy(this.startDate);
        },
        /*表单日期与时间*/
        verification(v){
            var reg=/[\u4E00-\u9FA5]/
            if(reg.test(v) && v.length<2){
                Toast({message:'成员姓、名请输入拼音,长度大于2', duration: 1000});
            }
        },
        phoneCodePeopleFn(val){
            this.person[0].people[0].phoneCode=val;
        },
        phoneCodeFnFn(val){
            this.phoneCode=val;
            if(this.typesource=='viator'){
                this.person[0].people[0].phoneCode=val;
            }
        },
        buyPost: function () {
            var _that = this;
        /*    var regChinese=/[\u4E00-\u9FA5]/
            if(_that.name1.length<2 || regChinese.test(_that.name1)){
                Toast({message:'联系人姓请输入，长度大于2', duration: 1000});
                return false;
            }*/
          /*  if(_that.name2.length<2 || regChinese.test(_that.name2)){
                Toast({message:'联系人名请输入，长度大于2', duration: 1000});
                return false;
            }*/

            var phoneCode = _that.phoneCode;
            var regPhoneCode = new RegExp("^[0\+][0-9]{1,5}$");
            if (!phoneCode) {
                Toast({message:'请输入电话号码国家代码', duration: 1000});
                return false;
            } else if (!regPhoneCode.test(phoneCode)){
                Toast({message:'请设置电话区号', duration: 1000});
                return false;
            }
            var phone = _that.phone;
            //var regMobile = new RegExp("^(1)[0-9]{10}$");
            if (!phone || phone.length < 3) {
                Toast({message:'请输入手机号码', duration: 1000});
                return false;
            }
            for(let b = 0; b < _that.bookingQuestions.length; b++){
                if (_that.bookingQuestions[b].answer.length < 1) {
                    Toast({message:'请输入'+_that.bookingQuestions[b].title, duration: 1000});
                    return;
                }
            }

            // else if (!regMobile.test(phone)) {
            //   _that.showToast('手机号码格式不正确');
            //   return false;
            // }

            var email = _that.email;
            var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
           /* if (!email) {
                Toast({message:'请输入邮箱', duration: 1000});
                return false ;
            } else if (!regEmail.test(email)) {
                Toast({message:'请输入正确的邮箱', duration: 1000});
                return false;
            }*/

            if(_that.carPoolOrder){
                if((Number(_that.childPassengers) + Number(_that.adultPassengers)) > (_that.carPoolOrderData.maxPartySize - _that.carPoolOrderData.currentPartySize)){
                    MessageBox({
                        title: '提示',
                        message: '已超出剩余人数，是否发起新的拼游？',
                        confirmButtonText:'发起',
                        showCancelButton: true
                    }).then(res=>{
                        if(res=='confirm'){
                            _that.carPoolOrder = '';
                            _that.carPoolOrderData = '';
                            _that.startDate = '';
                        }
                    });
                    return;
                }
            }else{
                if (!_that.startDate) {
                    Toast({message:'请先选择出行日期', duration: 1000});
                    return false;
                }
            }

            let _nowDateTime = new Date(formatDate(new Date())).getTime();
            let _startDateTime = new Date(formatDate(new Date(_that.startDate))).getTime();
            if (_startDateTime < _nowDateTime) {
                Toast({message:'出行日期已在过去', duration: 1000});
                return false;
            }
            

            var params = {
                           //拼游时间
                carPoolOrder:_that.carPoolOrder, //拼游订单id
                consumer_name: _that.name1, //姓名
                consumer_wechat: _that.wechat, //微信
                consumer_phone: _that.phoneCode + _that.phone, //客户电话
                consumer_email: _that.email, //邮箱
                serveAddress: _that.serve_address, //接送地址
                note: _that.content, //备注
                adultPassengers:_that.adultPassengers,  //成人数
                childPassengers:_that.childPassengers, //儿童数
                largeLuggages:_that.largeLuggages,  //大行李数
                person_id:_that.personid,   //选择几人出行id
                line_id:_that.line_id,    //ID
                startDate:_that.startDate,  //出团日期
                hotel_num: _that.hotel_num,  //酒店房间数
                amount: _that.totalPricePayCNY,
                childAges: _that.childAges
            }
            
            if(_that.bookingQuestions.length>0){
                params.bookingQuestionAnswers = [];
                _that.bookingQuestions.forEach((item,i)=>{
                    params.bookingQuestionAnswers.push({
                        questionId:item.questionId,
                        answer:item.answer,
                    })
                })
                params.bookingQuestionAnswers = JSON.stringify(params.bookingQuestionAnswers)
            }
            _that.axios.postAll('/grouptours/addcustomer', params,true) //拼游信息表单提交
                    .then(res => {
                storage.set('contact',{
                    contact_xing: _that.name1,
                    contact_ming: _that.name2,
                    wechat_number: _that.wechat,
                    phone: _that.phone,
                    phoneCode: _that.phoneCode,
                    e_mail: _that.email,
                })
                if(res.data.code == 200){
                    //跳转到确认订单页    返回订单orderNo
                    _that.order_no=res.data.data.personalOrder.orderNo
                    _that.$router.push('/GroupShowOrder-detail-unpaid?order_no='+_that.order_no);

                }else if(res.data.code == 305){
                    //重复订单跳转到我的订单
                    _that.$router.replace('/my-order-detail-unpaid?order_no='+_that.order_no);
                }else{
                    //其他错误提示
                    Toast({message: res.data.msg, duration: 1500});
                }

            }).catch(err => console.log(err));
        },
      
        //获取拼游info信息
        getGroupInfo:function(){
            let _that = this;
            let params = {
                id: this.$route.query.line_id
            };
            //console.log(params)
            _that.axios.postAll('/wxsoft/grouptourinfo', params,true)
                    .then(res => {
                    if(res.data.code==200){
                        _that.groupInfo = res.data.data;
                        //保存分享用得图片
                        _that.shareImg=res.data.data.img;
//                        console.log(_that.shareImg,'99999999999')
                        _that.groupOrder=res.data.data.groupOrder;
                        if(_that.carPoolOrder){
                            _that.carPoolOrderData = _that.groupOrder.filter(item => item._id == _that.carPoolOrder)[0]
                            _that.startDate = _that.carPoolOrderData.startDate;
                        }
                        _that.totalPrice = res.data.data.person_price;
                        _that.totalPriceCNY = res.data.data.person_price_cny;
                        if(_that.groupInfo.hotel_unit_price > 0 && _that.groupInfo.hotel_days > 0){
                            _that.hotel_num = 1;
                            _that.unit_hotel_price = Number(_that.groupInfo.hotel_unit_price) * Number(_that.groupInfo.hotel_days);
                            _that.unit_hotel_price_cny = Number(_that.groupInfo.hotel_unit_price_cny) * Number(_that.groupInfo.hotel_days);
                        }else{
                           _that.hotel_num = ''; 
                        }
                        if (_that.unit_hotel_price.toString().split('.').length > 1) {
                            _that.unit_hotel_price = _that.unit_hotel_price.toFixed(2);
                        }
                        if (_that.unit_hotel_price_cny.toString().split('.').length > 1) {
                            _that.unit_hotel_price_cny = _that.unit_hotel_price_cny.toFixed(2);
                        }
                        if(_that.carPoolOrder){
                            _that.isBusy(_that.carPoolOrderData.startDate);
                        }else{
                            _that.totalPriceFun();
                        }

                    }
            }).catch(err => {
                console.log(err)
            });
        },
        isBusy(date) {
            let _that = this;
            let params = {
                id: _that.line_id,
                date
            };
            _that.axios.post('wxsoft/isBusy', params,true)
            .then(res => {
                
                _that.isBusySeason = res.data.isBusySeason,
                _that.totalPrice = res.data.isBusySeason ? _that.groupInfo.busy_person_price : _that.groupInfo.person_price;
                _that.totalPriceCNY = res.data.isBusySeason ? _that.groupInfo.busy_person_price_cny : _that.groupInfo.person_price_cny;
                _that.totalPricePay = res.data.isBusySeason ? _that.groupInfo.busy_person_price : _that.groupInfo.person_price;
                _that.totalPricePayCNY = res.data.isBusySeason ? _that.groupInfo.busy_person_price_cny : _that.groupInfo.person_price_cny;
                _that.totalPriceFun();
            })
            .catch(err => {
                console.log(err)
            });
        },
        showChildAges: function () {
            this.childAges = [];
            for(let n = 1; n <= this.childPassengers; n++){
                this.childAges.push('')
            }
            this.totalPriceFun();
        },
        // 计算总价
        totalPriceFun: function () {
            if(Number(this.adultPassengers) < 1){
                this.adultPassengers = 1;
            }
            let count = Number(this.adultPassengers) + Number(this.childPassengers);
            let _totalPricePay = Number(this.totalPrice) * count;
            let _totalPricePayCNY = Number(this.totalPriceCNY) * count;

            let _hotel_price = this.isBusySeason ? this.groupInfo.busy_hotel_unit_price : this.groupInfo.hotel_unit_price;
            let _hotel_price_cny = this.isBusySeason ? this.groupInfo.busy_hotel_unit_price_cny : this.groupInfo.hotel_unit_price_cny;
            
            let hotel_price = 0;
            let hotel_price_cny = 0;
            if(_hotel_price > 0 && this.groupInfo.hotel_days > 0){
                if(Number(this.hotel_num) < 1){
                    this.hotel_num = 1;
                }
                hotel_price = Number(_hotel_price);
                hotel_price_cny = Number(_hotel_price_cny);
            }
            let _hotel_num = Number(this.hotel_num);
            if(_hotel_num){
                hotel_price = _hotel_num * hotel_price * Number(this.groupInfo.hotel_days);
                hotel_price_cny = _hotel_num * hotel_price_cny * Number(this.groupInfo.hotel_days);
            }else{
                hotel_price = 0;
                hotel_price_cny = 0;
            }
            this.unit_hotel_price = hotel_price;
            this.unit_hotel_price_cny = hotel_price_cny;
            if (hotel_price.toString().split('.').length > 1) {
                this.unit_hotel_price = hotel_price.toFixed(2);
            }
            if (hotel_price_cny.toString().split('.').length > 1) {
                this.unit_hotel_price_cny = hotel_price_cny.toFixed(2);
            }
            this.totalPricePay = _totalPricePay + hotel_price;
            this.totalPricePayCNY = _totalPricePayCNY + hotel_price_cny;
            if (this.totalPricePay.toString().split('.').length > 1) {
                this.totalPricePay = this.totalPricePay.toFixed(2);
            }
            if (this.totalPricePayCNY.toString().split('.').length > 1) {
                this.totalPricePayCNY = this.totalPricePayCNY.toFixed(2);
            }
        }, 
        share() {
            wxShare({
                title: '快帮行', // 分享标题
                desc: this.groupInfo.title+this.groupInfo.description, // 分享描述
                link: config.url+'/quick_help_wap1/#/GroupShow/'+'?/line_id='+this.groupInfo.line_id+'&/product_id='+this.groupInfo.product_id, // 分享链接
                imgUrl: this.groupInfo.img, // 分享图标
                debug: false
            }, function () {
                console.log('分享成功')
            });
        },

       
    },
    mounted(){
        window.scrollTo(0,0);
        //拼游id
        this.line_id=this.$route.query.line_id;  //拼游id
        this.product_id=this.$route.query.product_id;
        this.carPoolOrder=this.$route.query.carPoolOrder;

        this.getGroupInfo(); //拼游
        
    },
    beforeMount(){
        if(storage.get('contact')){
            var contact=storage.get('contact');
            this.name1=contact.contact_xing
            this.name2=contact.contact_ming
            this.wechat=contact.wechat_number
            this.phone=contact.phone
            this.phoneCode=contact.phoneCode
            this.email=contact.e_mail
        }
        if(storage.get('person')){
            this.person=storage.get('person')
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == "stripe-pay") {
            sessionStorage.stripePayInfo = JSON.stringify(this.stripePayInfo);
            next();
        }else{
            sessionStorage.removeItem("stripePayInfo");
            next();
        }
    }
}
</script>

<style lang="scss">

    @import "../assets/base";

    .listinputwidth{
        width: 100%;
    }
    .list-item-select{
        width: 100%;
        font-size: rpx(30);
        text-align: center;
        position: relative;
        margin-left: rpx(50);
    }

    .list-item-select  select {
        width: 100%;
        height: rpx(50);
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        background-color: #ffffff;
        background-image: none !important;
        filter: none !important;
        border: none;
        outline: none;
        /*height: rpx(60) !important;*/
        /*line-height: rpx(60);*/
        font-size: rpx(30);
        color: #666;
    }
    .list-item-select select .list-item-select-opction-stance{
        font-size: rpx(30);
        color: #666;
    }
    .list-item-select select option{
        font-size: rpx(16);
        width: 100%;
        background: #fff;
        text-align: center;
    }
    .list-item-select select::-ms-expand { display: none; }
    .show-order .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .show-order .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .show-order{
        background: $bgcolor1;
        height: 100%;
    }

    .show-order .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
    &-btnLeft{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(32);
        height: rpx(32);
    }
    }
    &-btnRight:after{
         display: block;
         content: ' ';
         width: rpx(64);
         height: rpx(64);
     }
    &-title{
         flex: 1;
         font-size: rpx(36);
         text-align: center;
         font-weight: normal;
     }

    }

    //产品信息

      .show-order .product {
          padding: rpx(30);
          display: flex;
          align-items: center;
          background: $color0;
    &-img {
         width: rpx(160);
         height: rpx(160);
     }
    &-info {
         flex: 1;
         padding-left: rpx(30);
         line-height: 130%;
    &-title {
         font-size: rpx(28);
     }
    &-title2 {
         font-size: rpx(24);
         color: $color5;
         word-wrap: break-word;
     }
    &-desc {
         font-size: rpx(24);
         color: $color5;
     }
    }
    }

    //项列表
      .show-order .list {
          background: $color0;
    &-title {
        font-size: rpx(36);
        padding: rpx(30);
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-tips{
            color: #ff7d01;
            font-size: rpx(24);
            font-weight: bold;
        }
    }
    &-item {
         display: flex;
         align-items: center;
         padding:rpx(35) rpx(30);
         border-bottom: solid 1px $color2;

    &-title {
         width: rpx(240);
         font-size: rpx(30);
     }
    &-textarea {
      display: inline-block;
      width: 100%;
      height: rpx(120);
      line-height: 1.2;
      font-size: rpx(28);
    }
    &-input {
        flex: 1;
        display: flex;
        input{
            height: rpx(50);
            font-size: rpx(30);
            line-height: rpx(50);
        }
        &-phoneCode{
            width:rpx(120);
            border-right: solid 1px $color2;
        }
        &-phone{
            overflow: hidden;
            padding-left: rpx(20);
        }
    }
    &-flex{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        input{
            width: rpx(160);
        }
        span{
            font-size: rpx(26);
        }
        span.strong{
            color: #ff5722;
        }
    }
    .warning {
        color: $color3;
    }
    }
    }
    .show-order .person{
        background: $color0;
    &-class{
         padding: rpx(20) 0;
         border-bottom: solid 1px $color2;
    &-title {
         font-size: rpx(30);
         padding: rpx(20) rpx(30);
         font-weight: normal;
    &-icon {
         display: inline-block;
         margin-right: rpx(20);
         width: rpx(8);
         height: rpx(28);
         border-radius: rpx(6);
         background: $color3;

     }
    }
    &-item {
         padding:0 rpx(30);
    &-title {
         font-size: rpx(28);
         font-weight: normal;
         padding:rpx(10) 0;
     }
    &-input{
         display: flex;
         align-items: center;
         padding: rpx(20) 0;
         box-sizing: border-box;
         overflow: hidden;
         font-size: rpx(28);
    &.tit{
         width: rpx(80);
     }
    .col{
        flex: 1;
        padding-right: rpx(20);
    input{
        width: 100%;
        border-bottom:1px solid #eee;
        font-size: rpx(28);
    }
    }
    }
    }
    }
    }
    .show-order .ticketAdd {
        padding: rpx(30);
        background: $color0;
    &-title {
         font-size: rpx(36);
         padding-bottom: rpx(30);
     }
    &-choose {

         display: flex;
    &-title {
         font-size: rpx(30);
         width: rpx(200);
     }
    &-btn {
         flex: 1;
         text-align: right;
         font-size: rpx(30);
         color: $color5;
    &-price {
         font-size: rpx(30);
         color: $color3;
     }
    &-img {
         width: rpx(32);
         height: rpx(32);
         margin-left: rpx(100);
     }
    }
    }

    }

    //优惠券
      .show-order .ticket {
          position: fixed;
          background: rgba(0, 0, 0, .5);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 9999;
    &-main {
         position: relative;
         margin-bottom: rpx(240);
         padding: rpx(30);
         background: $color0;
         min-height: rpx(400);
    .noticket {
        padding-top: rpx(90);
        text-align: center;
        font-size: rpx(40);
        color: $color5;
    }
    &-title {
         padding-bottom: rpx(30);
         font-size: rpx(40);
         text-align: center;
     }
    &-close {
         position: absolute;
         left: 50%;
         bottom: rpx(-100);
         margin-left: rpx(-32);
         width: rpx(64);
         height: rpx(64);
     }
    &-list {
         width: rpx(690);
         margin: auto;
    &-item {
         position: relative;
         width: 100%;
         height: rpx(160);
         margin-bottom: rpx(30);
         display: flex;
         align-items: center;
    &-left {
         width: rpx(200);
         height: rpx(160);

         background: $color7;
         border-radius: $radius10 0 0 $radius10;
         font-size: rpx(20);
         color: $color0;
         text-align: center;

    &-price {
         padding-top: rpx(50);
         font-size: rpx(60);
    &-sign {
         padding-top: rpx(80);
         font-size: rpx(30);
     }
    }
    }
    &-right {
         flex: 1;
         width: rpx(240);
         height: rpx(160);
         background: $bgcolor1;
         border-radius: 0 $radius10 $radius10 0;
         padding-left: rpx(30);
    &-text1 {
         font-size: rpx(36);
         padding-top: rpx(40);
     }
    &-text2 {
         padding-top: rpx(10);
         font-size: rpx(24);
         color: $color5;
     }
    &-dot {
         position: absolute;
         right: rpx(30);
         top: rpx(55);
         width: rpx(50);
         height: rpx(50);
         border-radius: 50%;
         background: $color0;
         border: solid 2px $color7;
     }

    }
    }
    }
    }

    }

    //底部
      .show-order .buyBar {
          position: fixed;
          z-index: 2;
          left: 0;
          right: 0;
          bottom: 0;
          border-top: $color2 solid 1px;
          background: $color0;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
    &-item {
         flex: 1;
         height: rpx(90);
    &-title {
         padding: rpx(10) 0 0 rpx(30);
         font-size: rpx(24);
     }
    &-price {
         padding-top: rpx(10);
         padding-left: rpx(30);
         font-size: rpx(40);
         color: $color3;
     }
    }
    &-item:last-child {
         border-right: none;
     }
    &-buy {
         width: rpx(300);
         height: rpx(90);
         line-height: rpx(90);
         background: linear-gradient(to left, #ff5722, #ffc000);
         text-align: center;
         font-size: rpx(40);
         color: $color0;
     }
    &-active {
         color: $color3;
     }

    }

    /*拼游信息及id*/
    /*.grouptourism{
        padding: rpx(30);
        background: #ffffff;
        font-size: rpx(36);
    }*/
    .pickerDemo .mint-popup-bottom{
        /*bottom:rpx(80)*/
    }
    .pickerDemo .mint-datetime-picker .picker-toolbar .mint-datetime-action{
        font-size: rpx(36);
    }

    .list-prices{
      background: #F5F5F5;
      padding: rpx(40) rpx(30);
    }
    .list-prices-list{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .list-prices-list + .list-prices-list{
      margin-top: rpx(20);
    }
    .list-prices-title{
      font-size: rpx(30);
    }
    .list-prices-local{
      font-size: rpx(40);
      color: #ff5722;
    }
    .list-prices-local span{
      color: #999;
    }
    .list-prices-cny{
      font-size: rpx(40);
      color: #999;
    }
    .order-buy{
      padding-top: rpx(50);
      background: #F5F5F5;
      text-align: center;
    }
    .order-buy-btn{
      width: rpx(700);
      margin: 0 auto;
      height: rpx(80);
      line-height: rpx(80);
      border-radius: rpx(80);
      background: #ff5722;
      text-align: center;
      font-size: rpx(36);
      color: #fff;
    }
    .list-price-buy::after{ border: none; }
    .pay-tips{
        font-size: rpx(26);
        color: #999;
        padding: rpx(30) rpx(30) 0;
        line-height: 1.2;
        background: #F5F5F5;
        font-weight: bold;
    }
    .pay-tips div{
        margin-top: rpx(10);
        font-weight: normal;
        color: #ff7d01;
    }
    .carPoolOrderTitle{
        margin: rpx(30);
        background: #fff;
    }
    .flex-box-center{
        display: flex;
        align-items: center;
    }
</style>
